昨天我們了解到 Interaction 相互作用使用各種手勢可以對不同元件產生互動，透過不同手勢類型可以執行不同的任務指令，並依照應用程式預設好的狀態與產品進行互動，互動式組件同時也呼應了使用者的手勢給予狀態回饋，元件狀態根據重要性來強調視覺外觀或動畫效果，強調需要受到注目的元件狀態，讓用戶能順暢的完成目標動作。
今天我們進入到 Material Design 中 Communication 通訊的章節，由於內容涵蓋的範圍較多較廣，我們會分成三天來介紹，今天會先了解關於確認與承認、資料格式和數據可視化這三個部分，讓我們繼續看下去吧。
Confirmation & acknowledgement 確認與承認
Data formats 資料格式
Data visualization 數據可視化
Empty states 空白狀態
Help & feedback 幫助與反饋
Imagery 意象
Launch screen 啟動畫面
Onboarding 快速入門
Offline states 離線狀態
Writing 寫作
在採取行動之前先進行確認與承認的步驟，減少用戶對於已採取或將要採取的不確定性動作。除此之外還可以防止用戶犯錯，要注意的是並非所有動作都需要確認與承認。
動作類型
當操作介面請求用戶確認時，它會詢問用戶是否要繼續執行操作，詢問的內容顯示與操作有關的警告或重要信息。如果執行的結果是可以恢復或是忽略的步驟就不需要確認。例如: 當用戶選取畫面中的圖片，則無需進一步確認。
需要與用戶確認時最好使用彈跳視窗進行確認，提供用戶可採取的操作 ( 確認執行或取消退出 ) 並通知結果。在背景執行的系統操作可以使用短消息顯示在畫面中通知用戶，短消息顯示的時間很短，也可以在短消息上放置取消操作的選項，如果短消息具有操作選項則會一直保留到用戶執行其他操作 ( 例如: 滾動畫面 ) 後才消失。
確認可以通過各種組件來傳遞。選擇確認組件的標準包括：
短暫的提示確認組件將在出現後的幾秒鐘內自行退出畫面。通過操作關閉確認組件的動作來關閉可以拒絕的確認組件。
使用通知來傳達在背景執行的訊息，通知用戶特定的狀態更改。
使用短消息提供有關操作的簡短回饋。
當介面內容必須連接網路，而沒有網路的狀態下無法載入或同步時，請使用空白狀態，這時也可以顯示重新載入的連結，幫助用戶完成任務。使用戶能夠與應用程式的其他部分進行更多互動。
數據格式描述了不同類型的數字和語言數據。
日期和時間 ( 點選連結可以觀看 Material 範例 ) 可以通過以下方式編排：
要顯示日期或時間範圍，請在日期或時間範圍之間顯示一個破折號（無空格）。例如：1月6日-2月2日 8:00 AM–12：30 PM，書寫月份時請增加空格或刪除破折號。
由於時區在不同地區之間會有所不同，因此時區的使用應清楚標示。
根據內容顯示日期或時間，或同時顯示日期和時間。
當空間有限時，請使用縮寫。
通常在對話中顯示日期和時間訊息，可以幫助用戶了解時間。例如: 明天下午提醒。
數據編輯判斷是指如何判斷數字並遮蓋敏感數據。當遇到敏感數據則使用部分隱藏[ ••• ] 的方式顯示，他們隱藏了部分信用卡卡號或身分證字號。可以在字體和介面平台使用此格式:
在一串編號或數字中間使用三個 [ ••• ]，或是改用萬國碼字串。
信用卡號或是簽證號碼使用四個 [ •••• ] ，或是改用萬國碼字串進行編輯。
在一串文字後方加上文字省略符號 [ ••• ] 表示未顯示的字母、單詞或未顯示的文字。或是僅顯示少部份名稱或電子郵件地址。
以圖形形式描述密集和復雜的訊息，將數據轉換為視覺化圖形，可以幫助用戶快速的探索及觀看數據，簡化數據有利於比較或是陳述故事，供用戶做出決策。數據可視化表示不同類型和大小的數據：從幾個數據點到大型多元數據集。先考慮數據的準確性、清晰度和完整性，同時預期用戶對數據深度、複雜性和形式的需求，用清楚的方式呈現信息，在視覺上需要適應不同設備尺寸。
時間類型的圖表顯示一段時間內的數據，例如: 趨勢或多個類型比較。常見的使用方式包括：股價表現、健康統計、年表。
時間變化圖表包括：
類別比較圖用來比較多種不同類別之間的數據。常見範例: 各國收入、熱門場地時間、團隊分配。
類別比較圖包括：
排名圖顯示項目在項目列表中的位置。常見範例: 選舉結果、績效統計。
排名圖包括：
部分整體關係圖顯示了零件元素的加總。常見範例: 產品類別合併收入、預算案。
部分整體關係圖表包括：
相關圖顯示兩個或多個數據之間的相關性。常見範例: 收入和預期壽命。
相關圖包括：
分佈圖顯示每個數值在數據中出現的頻率。常見範例: 人口分佈、收入分配。
分佈圖包括：
流程圖顯示數據在多個狀態之間的移動。常見範例: 資金轉帳、投票數和選舉結果。
流程圖包括：
關係圖顯示了多個項目間的相互關聯。常見範例: 社交平台、字表。
排名圖包括：
根據數據的描述在多種類型的圖表中選擇適合的圖表。
可以使用時間數列圖來表示隨時間的變化，時間數列圖是按時間順序表示數據的圖表。隨時間變化表示的圖表包括：折線圖，條狀圖和面積圖。
條狀圖和圓餅圖均可用於顯示比例，比例表示與總數相比的數值。
在顯示時間變化上條狀圖、折線圖和堆疊面積圖比圓餅圖效果更好。
條狀圖、折線圖和堆疊面積圖有相同的基準線，在比較條狀長度差異時可以更加容易分析。
面積圖分為堆疊面積圖和重疊面積圖：
不建議將重疊的面積圖用於兩個以上的時間序列，因為這樣做會使數據雜亂無法區分。使用堆積面積圖在同一個時間內比較多個數值（水平軸表示時間）。
數據可視化使用自訂樣式和形狀，讓數據一目了然、易於理解，適合用戶需求和內文。圖表可以自訂內容:
視覺編碼是將數據轉換為視覺形式的過程。唯一的圖形屬性可以應用於定量數據（例如: 溫度、價格或速度）和定性數據（例如: 類別、風味或表達方式）。可以將多種視覺處理應用於多個數據。例如: 條狀顏色可以表示類別，而條裝的長度可以表示數值。
這些屬性包括：
形狀以多種方式顯示定性數據，可以輕鬆比較範圍內或其他類別的數據。形狀設計需注意可測量形狀和圖表精準度等。
圖表可以表現不同等級的精確數據。顯示的數據應使用適合與用戶互動的形狀表示（根據觸摸目標的大小和相關的承受能力）。主要在表達主旨或趨勢的數據可以使用細節較少的形狀。
顏色通過四種方式區分圖表數據：
提供看不到色差的用戶使用時，您可以使用其他方法來強調數據，例如: 高對比度的陰影、形狀或紋路。將文字項目應用於數據有助於說明含義，同時消除了對圖片範例的需求。想要了解更多顏色對比可以點擊查看。
圖表中的線段可以表達有關數據的數值，例如: 層次結構、突出顯示和比較。可以使用不同的方式來設計線段，例如: 使用虛線或各種不透明度，請勿使用不同的顏色顯示同一個數據的週期變化。
可應用元素包括：
文字可用於標記不同的圖表元素，包括：
圖表中最重要得文字通常是圖表標題，其中軸項目和圖例說明屬於最低層級結構。藉由標題的字型尺寸可以表達內容的重要層級，應謹慎使用尺寸比例並使用少量的尺寸及字體樣式。
圖示可以表示圖表中不同類型的數據，並可以提高圖表的整體識別性。圖示可以用於：
在圖表中放置圖示時，建議使用通用的圖示，尤其是在表示動作或狀態時，例如：存檔、下載、完成、錯誤和警告。
具有項目的軸線（或多個軸）顯示數據的比例和範圍。例如: 折線圖沿水平和垂直標記的軸線顯示一系列數值。也可以不顯示軸線讓條狀圖的數值成為畫面焦點，不顯示軸線適合用在項目簡單的圖表。
條狀圖應從基準線為零開始。若不從基準開始顯示數值可能會導致錯誤的數據認知。數值標籤反映圖表中最重要的數據項目。根據需要在介面中以一致的方式使用數值標籤來表現數值等級，要注意軸項目不應妨礙用戶閱讀圖表。
文字項目應水平放置在圖表上以便於閱讀。文字項目不應旋轉或堆疊會使它們難以閱讀。
圖例和註釋描述了圖表信息。註釋應顯示數值、數據異常數值和所有值得注意的內容。在桌上型電腦建議將圖例放在圖表下方。在手持設備上將圖例放在圖表上方，讓圖例和註釋在互動保持可見。
圖表元素可以直接在簡單圖表中標記。對於密集的圖表可以在圖例中顯示標籤。在可穿戴設備（或其他小螢幕）上顯示的圖表應為手持或桌機圖表的簡化版本，標註圖表中關鍵數值或提供軸線數值標籤，讓使用者能判斷相對數值。
圖表提供了互動模式，使用者可以控制顯示的數據。這些模式讓使用者可以專注於圖表的特定數值或範圍。下列的互動模式、樣式和效果（例如: 觸覺回饋）可以提高用戶對圖表數據的了解：
使用逐步公開顯示圖表詳細信息，用戶可以根據需求查看特定的數據。在桌機上鼠標停留狀態可以顯示更多詳細數據。在手持裝置上觸摸並按住手勢會在圖表上方顯示數據。
縮放和水平移動是常見的圖表互動方式，它們影響用戶研究數據和瀏覽圖表介面的密集程度。平移動作通常與縮放動作配對。
縮放會改變畫面遠近顯示 UI。設備類型設定如何執行縮放，如果縮放不是主要操作，可以通過單擊和拖動（在桌機上）或雙擊（在手持裝置上）來實現。
平移提供用戶瀏覽擴展到畫面外的內容，依照圖表樣式來設計提供用戶平移的方向建議。例如: 用戶水平移動可以查看本月的運動成效，垂直移動可以查看過往運動成效。在手持裝置上，平移通常是通過手勢（例如單指滑動）來實現的。
在手持裝置上，分頁是一種常見的模式，允許用戶通過向右或向左滑動來查看上一個或下一個圖表。
可以使用切換操控元件、選項區塊和下拉式選單來切換或更改觀看中數據圖表。這些操控元件還可以顯示指標，用戶可以調整操控元件。
動畫可以增強數據之間的關係以及用戶與數據互動方式。有目地性（而非裝飾性地）使用動畫來表達不同狀態和空間之間的關係。動畫應具有邏輯性、平穩性和響應性，而不會阻礙用戶執行。
當產品尚無數據時，空的畫面和圖表可以顯示與主題數據相關的內容。在適當的地方，可以顯示角色動畫來提供趣味和鼓勵。
儀表板的用途應反映在畫面排版、樣式和互動模式中。無論是表現文件還是深入探索數據的工具，可以在儀表板的 UI 中顯示數據圖表，多個簡易的圖表可以傳達一個故事，而不是顯示一個複雜的圖表需要讓用戶去研究。
儀表板應優先處理最重要的信息（使用排版），或是顯示一個焦點，根據層次結構（使用顏色、位置、大小和權重）對訊息進行排序
根據數據訊息進行優先層級排序，並考慮下列問題:
分析儀表板使用戶能夠瀏覽多組數據並發現趨勢。這些儀表板包括複雜的圖表，可用於發現數據見解。例如:
Analytics（分析）訊息中心範例:
操作儀表板目的在於回答一組預定問題。它們用於完成與監督有關的任務。這類型的儀表板用簡單的圖表排列來表現當前訊息。範例包括：
操作儀表板範例:
呈現儀表板提供有關主題的精選縮圖。這些儀表板通常包含一些小圖表或數據片段，在上方動態標題說明每個圖表中提供的趨勢和見解。
範例包括：
呈現儀表板範例：
今天我們了解到 Communication 通訊可以使用不同方式的通知，提供用戶確認與承認，減少用戶對於已採取或將要採取動作的不確定性。除此之外還可以防止用戶犯錯。在畫面顯示的日期時間也有各種不同的格式建議，在顯示敏感數據時隱藏部分訊息，保戶用戶的重要資料。將數據轉換為視覺化圖形，可以幫助用戶快速的探索及觀看數據，簡化數據有利於比較或是陳述故事，每個圖表提供不同的趨勢和見解。考慮數據的準確性、清晰度和完整性，同時預期用戶對數據深度、複雜性和形式的需求，用清楚的方式呈現信息，在視覺上需要適應不同設備尺寸。
明天讓我們繼續完成 Communication 通訊 的章節，每天一點一點的逐個擊破，找出那些藏在細節中的魔鬼，不要讓大魔王有機會可以捉弄我們，迎向更美好的介面設計吧(握拳)！
如果您喜歡這篇文章或是這篇文章有幫助到您，歡迎按讚鼓勵，我們明天見囉~
iThome鐵人賽
看影片追技術